import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Dialog from '@kuiper-components/dialog';
import Button from '@kuiper-components/button';
import Label from '../../../components/Label';
import s from './style.module.css';
import AddYunaqBlacklist from '../../../components/AddYunaqBlacklist';

function Suggest({
	className,
	title,
	recommendation,
	impact,
	description,
	reference,
	taskType,
	taskId,
	warningId,
	cydEnabled,
	children,
}) {
	const [visible, setVisible] = React.useState(false);

	return (
		<>
			<Button
				link
				className={cn(className, s.suggest)}
				onClick={() => setVisible(true)}
			>
				{children}
			</Button>
			<Dialog
				maskStyle={{ zIndex: 100 }}
				title={title}
				visible={visible}
				wrapClassName={s.suggestModal}
				onClose={() => setVisible(false)}
			>
				<Label>描述</Label>
				{taskType === 'vul' ? (
					<p className={s.paragraph}>{description}</p>
				) : (
					[].concat(description).map(d => (
						<p key={d} className={s.paragraph}>
							{d}
						</p>
					))
				)}
				<Label>影响</Label>
				<p className={s.paragraph}>{impact}</p>
				<Label>修复建议</Label>
				<p className={s.paragraph}>{recommendation}</p>
				<Label>参考信息</Label>
				<p className={s.paragraph}>
					{reference?.length > 0
						? reference?.map(x => (
								<div key={x}>
									<a href={x} target="_blank" rel="noopener noreferrer">
										{x}
									</a>
								</div>
						  ))
						: '暂无信息'}
				</p>
				<div className={s.actions}>
					<Button onClick={() => setVisible(false)}>关闭</Button>
					{cydEnabled && taskType === 'vul' && (
						<AddYunaqBlacklist
							taskId={taskId}
							warningId={warningId}
							onOk={() => setVisible(false)}
						/>
					)}
				</div>
			</Dialog>
		</>
	);
}

Suggest.propTypes = {
	className: PropTypes.string,
	title: PropTypes.string.isRequired,
	recommendation: PropTypes.string,
	impact: PropTypes.string,
	description: PropTypes.string,
	reference: PropTypes.arrayOf(PropTypes.string),
	status: PropTypes.string.isRequired,
	isLatestTask: PropTypes.bool.isRequired,
	onSetIgnore: PropTypes.func,
	onSetUnignore: PropTypes.func,
	children: PropTypes.node.isRequired,
	taskType: PropTypes.string.isRequired,
	taskId: PropTypes.string.isRequired,
	warningId: PropTypes.string.isRequired,
	cydEnabled: PropTypes.bool,
};
Suggest.defaultProps = {
	className: s.suggest,
	onSetIgnore: () => {},
	onSetUnignore: () => {},
};

export default Suggest;
